<template>
  <div class="page-container">
    <h2 class="page-title">积分商城</h2>
    <div class="points-bar">
      <el-tag type="warning">当前积分：{{ points }}</el-tag>
    </div>
    <div class="grid">
      <el-card v-for="g in goods" :key="g.id" class="card" shadow="hover">
        <img :src="g.image" class="thumb" />
        <div class="name">{{ g.name }}</div>
        <div class="points">{{ g.points }} 积分</div>
        <el-button type="primary" size="small">兑换</el-button>
      </el-card>
    </div>
  </div>
</template>
<script setup>
const points = 1280
const goods = [
  { id: 1, name: '20元礼品卡', points: 200, image: 'https://bpic.588ku.com/element_pic/23/04/25/5e8411de54bad410bea106f9d2fa4ab5.png!/fw/300/unsharp/true' },
  { id: 2, name: '保温杯', points: 500, image: 'https://img.shetu66.com/2023/06/07/1686126183122469.jpg' }
]
</script>
<style scoped>
.page-container { max-width: 1100px; margin: 0 auto; padding: var(--spacing-xl); }
.page-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-lg); }
.points-bar { margin-bottom: var(--spacing-lg); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--spacing-lg); }
.card { display: flex; flex-direction: column; gap: var(--spacing-sm); align-items: flex-start; }
.thumb { width: 100%; height: 150px; object-fit: cover; border-radius: var(--radius-md); }
.name { font-weight: var(--font-weight-medium); }
.points { color: var(--primary-color); }
</style>